<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>项目</title>
    <link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.min.css">
    <script>
        window.$ = window.jQuery = require("jquery")
    </script>
    <script src="../node_modules/popper.js/dist/umd/popper.min.js"></script>
    <script src="../node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
    <style type="text/css">
        .lead th a {
            color: silver;
            line-height: 60px;
        }
        .lead th img {
            width: 70px;
            height: 60px;
        }
        #web_bg {
            position:fixed;
            top: 0;
            left: 0;
            width:100%;
            height:100%;
            min-width: 1000px;
            z-index:-10;
            zoom: 1;
            background-repeat: no-repeat;
            background-size: cover;
        }
        body {
            margin: 0 10px 40px 10px;
            height: auto;
            min-width: 900px
        }
        .lead th {
            vert-align: middle;
            font-size: x-large;
            text-align: center;
        }
        #projectTab {
            margin-top: 3px;
        }
        #projectTab a {
            color: black;
        }
        #projectTabContent {
            height: auto;
            margin-bottom: 30px;
            min-height: 200px;
        }
        #Overview p {
            font-size: medium;
            letter-spacing: 2px;
        }
        .donation {
            margin-top: 20px;
        }
        .donation img{
            width: 40px;
            height: 40px;
        }
        .donation li {
            font-size: large;
            background: transparent;
        }
        .donation .m {
            float: right;
        }
        .progress {
            height: 65px;
        }
        .wrapper {
            display: grid;
            grid-template-columns: 48% 4% 48%;
            margin-top: 20px;
        }
        .wrapper li {
            background: transparent;
        }
        .chaPic {
            margin-top: 20px;
            border-radius: 10px;
        }
    </style>
</head>
<body>
<div id="web_bg" style="background-image: url(src/assets/images/idenbackground.jpg);"></div>
<table class="table table-dark lead" style="margin-bottom: 0;">
    <thead>
    <tr>
        <th><img src="src/assets/images/sign.jpeg"></th>
        <th><a href="home.html">主界面</a> </th>
        <th ><a href="explore.html">更多项目</a> </th>
        <th ><a href="identification.html">发起募捐</a> </th>
        <th><a href="user.html"> <img src="src/open-iconic-master/svg/person.svg" alt="no image"></a></th>
    </tr>
    </thead>
</table>
<div class="container-fluid" style="margin-top: 9px;">
    <div class="row">
        <div class="col-lg-7">
            <img src="src/assets/images/finish.jpg" style="width: 100%; height: 450px;">
            <ul id="projectTab" class="nav nav-justified nav-tabs" role="tablist">
                <li class="nav-item">
                    <a class="nav-link active" data-toggle="tab" href="#Overview">我们的成果</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" data-toggle="tab" href="#inquire">基金流查询</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" data-toggle="tab" href="#donater">捐献者</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" data-toggle="tab" href="#charity">机构速览</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" data-toggle="tab" href="#relative">相关项目</a>
                </li>
            </ul>
            <div id="projectTabContent" class="tab-content" >
                <div class="tab-pane active" id="Overview">
                    <p>
                        <br>我们在生活、精神以及学习上给予留守儿童最大程度的帮助，为孩子们撑起一片蓝天，使他们感受到来自社会大家庭的温暖。支愿者们以此次
                        行动为契机，把关爱留守儿童与扶贫事业相结合，在提升大学生社会责任感和实践能力的过程中，带动留守家庭致富，并提升基础教育质量，
                        发挥高校人才优势，陪伴留守儿童共同系好人生第一粒扣子。 帮助每一个困境儿童落实户口、低保、医疗救助等福利。
                        为儿童主任提供补贴和专业社工培训，保证孩子获得长期和高质量的服务。
                        为“儿童之家”配备更多更好的书本和玩具，让孩子们在游戏和集体活动中疏解心理压力，丰富精神世界，获得陪伴关爱。
                        为困境儿童提供应对突发问题的备用资金，帮助他们解决燃眉之急。</p>
                </div>
                <div class="tab-pane" id="inquire">
                    <div class="wrapper">
                        <ul class="list-group" id="flow">
                            <li class="list-group-item">3FsZKFhLRL2keDRLLftQFn8TcrhfUX1i3b</li>
                            <li class="list-group-item">33VxjP6fBs3utjYwXrsH8xr4Gii2P7PYqC</li>
                            <li class="list-group-item">3AmKHg9iwfyjY4GQoLDnzkee2Fwx2HfYJu</li>
                            <li class="list-group-item">3Ei2TkJaxXoLXNqk12DYpDBRWfnwFDe3AY</li>
                        </ul>
                        <div style="text-align: center">
                            <img src="src/open-iconic-master/svg/arrow-right.svg" alt="image missing">
                        </div>
                        <ul class="list-group">
                            <li class="list-group-item">3CKzLPRXEctJLdkWo3R38ggnmAqFwCVk91</li>
                        </ul>
                    </div>
                </div>
                <div class="tab-pane" id="donater">
                    <ul class="list-group donation" id="work_people">
                        <li class="list-group-item">
                            <img src="src/assets/images/wyf.jpeg">
                            <span>wyf</span>
                            <span class="m">￥5000</span>
                        </li>
                        <li class="list-group-item">
                            <img src="src/open-iconic-master/svg/person.svg">
                            <span>lyz</span>
                            <span class="m">￥10000</span>
                        </li>
                        <li class="list-group-item">
                            <img src="src/assets/images/zfzf.jpeg">
                            <span>zfzf</span>
                            <span class="m">￥2000</span>
                        </li>
                        <li class="list-group-item">
                            <img src="src/open-iconic-master/svg/person.svg">
                            <span>user1</span>
                            <span class="m">￥3000</span>
                        </li>
                    </ul>
                </div>
                <div class="tab-pane " id="charity">
                </div>
                <div class="tab-pane " id="relative">
                </div>
            </div>
        </div>
        <div class="col-lg-5">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-md-12">
                        <p style="color: orange; font-size: large">募捐情况</p>
                        <hr style="color: lightgrey; margin-top: 0">
                    </div>
                </div>
                <div class="row" style="margin-top: 30px">
                    <div class="col-md-6 col-sm-6 col-xs-6">
                        <h5>已募集金额</h5>
                        <h3 style="color: green" >￥<span id="donate_yet">20000</span></h3>
                    </div>
                    <div class="col-md-6 col-sm-6 col-xs-6">
                        <h5>目标金额</h5>
                        <h3 style="color: black" >￥<span id="donate_goal">20000</span> </h3>
                    </div>
                </div>
                <div class="row" style="margin-top: 40px">
                    <div class="col-md-12">
                        <h5>贡献人数</h5>
                        <h5><img src="src/open-iconic-master/svg/people.svg" style="width: 20px; height: 20px" >&nbsp;&nbsp;<span id="donate_num">4</span></h5>
                    </div>
                </div>
                <div class="row" style="margin-top: 114px">
                    <div class="col-md-12">
                        <div class="progress">
                            <div class="progress-bar" id="bar" role="progressbar" aria-valuenow="100"
                                 aria-valuemin="0" aria-valuemax="100" style="width: 100%; background-color: orangered">
                                <span style="line-height: 40px; font-size: x-large" id="bar_process">100 % 完成</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row chaPic" style="margin-top: 30px">
                    <img src="src/assets/images/ac3.jpeg" style="height: 300px" alt="image missing">
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>